<html>
<title>Loading Sample PAS Project to Virtual Learning Environment</title>
<head>
<script type="text/javascript" src="js/VLE.js"></script>
<script type="text/javascript" src="js/contentpanel/ContentPanel.js"></script>
<script type="text/javascript" src="js/navigation/NavigationLogic.js"></script>
<script type="text/javascript" src="js/navigation/NavigationPanel.js"></script>
<script type="text/javascript" src="js/common/loadxmldoc.js"></script>
<script type="text/javascript" src="js/node/Node.js"></script>
<script type="text/javascript" src="js/node/HtmlNode.js"></script>
<script type="text/javascript" src="js/node/CustomNode.js"></script>
<script type="text/javascript" src="js/project/Project.js"></script>

<script type="text/javascript" src="js/common/niftycube.js"></script>
<script type="text/javascript" src="js/common/sdmenu.js"></script>

<link rel="stylesheet" type="text/css" href="css/niftyCube.css" />
<link rel="stylesheet" type="text/css" href="css/navigation.css" />
<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />

<link rel="stylesheet" type="text/css" href="css/navigation.css" />

<script type="text/javascript">
window.onload=function(){
Nifty("div#navigationBox","big");
Nifty("ul.toolsButtons a","transparent");

}
</script>

</head>
<body>
	
<div id="centeredDiv">	



	
<div id="projectLeftBox">
	
	<div id="projectLogoBox">
		Project Art/Logo Goes Here
	</div>
	
	<div id="projectCurriculum">
		<div class="title">AP Programming 101E</div>
		<div class="unit">Unit 3: Section 1</div>
	</div>
	
	<div id="logInBox">
		<p>SignIn: Keyser Soze</p>
	</div>
	
	<div id="toolsArea">
		
		<div class="sectionHeader">Tools</div>
		
		<ul class="toolsButtons">
			<li><a href="#">journal</a></li>
			<li><a href="#">all work</a></li>
			<li><a href="#">print</a></li>
		</ul>
		<ul class="toolsButtons">
			<li><a href="#">save</a></li>
			<li><a href="#">save+exit</a></li>
			<li><a href="#" class="condensedText">report issue</a></li>
		</ul>

		</div>
		
	<div id="navigationArea">

			<div class="sectionHeader">Navigation</div>
		
			<div id="menuControls">
				        <input type="button" value="Expand All" onclick="myMenu.expandAll()" />
				        <input type="button" value="Collapse All" onclick="myMenu.collapseAll()" />
					</div>
					
			<div id="navigationMenuBox" >
				    <div id="my_menu" class="sdmenu">
					  <div>
				        <span>A1: Lessons Goals</span>
				        <a href="">Step1: name for the step here</a>
				        <a href="">Step2: name for the step here</a>
					  </div>
				      <div class=collapsed>
				        <span>A2: My Ideas</span>
				       <a href="">Step1: Here's an example of a very long step name</a>
				        <a href="">Step2: name for the step here</a>
						<a href="">Step3: name for the step here</a>
						<a href="">Step4: name for the step here</a>
						<a href="">Step5: name for the step here</a>
				      </div>
				      <div class="collapsed">
				       <span>A3: Explore New Ideas</span>
				        <a href="">Step1: another example of a long and intrguing step name</a>
				        <a href="">Step2: name for the step here</a>
						<a href="">Step3: name for the step here</a>
						<a href="">Step4: name for the step here</a>
						<a href="">Step5: name for the step here</a>
				      </div>
					  <div class="collapsed">
				       <span>A4: Test My Knowledge</span>
				       <a href="">Step1: name for the step here</a>
				        <a href="">Step2: name for the step here</a>
						<a href="">Step3: name for the step here</a>
					 </div>
				      <div class="collapsed">
				       <span>A5: Power Programming</span>
				       <a href="">Step1: name for the step here</a>
				        <a href="">Step2: name for the step here</a>
						<a href="">Step3: name for the step here</a>
						<a href="">Ste4: name for the step here</a>
				      </div>
					  <div class="collapsed">
				       <span>A6: Sum It Up</span>
				       <a href="">Step1: name for the step here</a>
				        <a href="">Step2: name for the step here</a>
					   </div>							
				   	</div>
		    </div>   <!-- end of #navigationMenuBox -->
	</div>   <!-- end of #navigationArea -->
		
	<div id="hostBrandingBox">
		Host Branding Goes Here
	</div>
	
</div>    <!-- end of #projectLeftBox-->

<div id="projectRightUpperBox">
	<div id="stepInfoBar">
		<div class="currentLessonSection">Lesson 3.1</div>
    	<div class="instantQuizIcon"></div>
		<div class="stepTypeLabel">
    		<a href="InstantQuizInfoBox.html" onclick="popUp(this.href,'console',440,720);return false;" target="_blank">Instant Quiz</a>
		    <span class="gradingStatus">(Grading Off)</span>
			<span class="subStepCounter">Question 1 of 8</span> 
		</div>
		<div id="stepNavButtons">
    		<a href="" ><img src="../../vle/images/go-previous.png" alt="Previous Arrow" width="32" height="32" border="0" /></a>
			<a href="" ><img src="../../vle/images/go-next.png" alt="Previous Arrow" width="32" height="32" border="0" /></a>
			<a href="" ><img src="../../vle/images/view-fullscreen.png" alt="Previous Arrow" width="32" height="32" border="0" /></a>
		</div>
    	
	</div>
</div>

<div id="projectRightLowerBox">
	<div id="contentDiv">
<iframe id="ifrm" name="ifrm" scrolling="auto" onload="contentPanelOnLoad();"
 width="100%" height="100%" frameborder="0">
 [Content for browsers that don't support iframes goes here.]
</iframe>
</div>
</div>





<div id="experimental">	experimental section<br/>
<div id="experimentalbuttons">
<input type="button" onclick="vle.getNodeVisitedInfo();" value="Get Node Visit Information" />
</div>
<div id="experimentaloutput">
</div>
</div>

</div>  <!-- centerDiv -->
<script type="text/javascript">
var vle = null;
function render() {
	  var xmlDoc=loadXMLDoc("basic_example.xml");
	  var project = new Project(xmlDoc);
	  vle = new VLE();
	  vle.setProject(project);
	  vle.navigationLogic = new NavigationLogic();
	  vle.renderNode(0);
}

render();

function toggleNavigationPanelVisibility() {
	vle.toggleNavigationPanelVisibility();
}

</script>
        <div id="hideshownavigation" onclick="toggleNavigationPanelVisibility();">
	    <input type="button" value="TOGGLE NAV BAR" />
        </div>

</body>
</html>